import { Component, Vue } from 'vue-property-decorator';
import request, { Api } from '@/request';
import InterfaceDetail from '@/component/interface-detail/interface-detail.vue';
import InterfaceEdit from '@/component/interface-edit/interface-edit.vue';
import AddInterface from './add-interface/add-interface.vue';

interface FormVueDesign extends Vue {
  form: any;
}

@Component({
  components: { InterfaceDetail, InterfaceEdit, AddInterface }
})
export default class DemandInterface extends Vue {
  // 接口详情内容
  private detail: any = {
    // 接口名称
    interfaceName: '',
    // 接口描述
    description: '',
    // 接口方法
    method: '',
    // 接口前缀
    prefix: '',
    // 接口路径
    path: '',
    // 参数类型  form,json，get就一种
    paramType: '',
    // 参数类型为json时传入
    paramJSON: '',
    // 参数类型为form或query时传入
    paramList: [],
    // 接口状态,0未发测试,1已发测试
    status: 0,
    // mock状态,0停用,1启用
    mockStatus: 0,
    // 出参源数据
    sourceData: '{success:true}',
    // mock数据
    mockData: '{success:true}'
  };

  // 需求id
  private demandId: number | undefined;

  // 需求
  private demand: any = {
    demandName: ''
  };

  // 表格数据
  private tableData = [];

  // 接口展示类型
  private tabType: string = 'interface';

  // 弹出框状态
  private visible = false;
  private confirmLoading = false;

  // 切换选项卡
  private changeTab(key: any) {
    console.log(key);
  }

  // 打开弹出框
  private openAddModal() {
    console.log('点击了modal');
    this.visible = true;
  }

  // 取消弹出框操作
  private handleCancel() {
    console.log('Clicked cancel button');
    this.visible = false;
  }

  // 新增接口确定按钮
  private handleOk(e: { preventDefault: () => void }) {
    const modalForm = <FormVueDesign> this.$refs.addInterfaceForm;
    console.log('点击了确定提交按钮', modalForm);

    const form = modalForm.form;

    this.confirmLoading = true;
    form.validateFields(async (err: any, values: any) => {
      if (err) {
        return;
      }
      console.log('接收到的表单值: ', values);
      const demand = { demandId: this.demandId };
      try {
        const res = await request.post(Api.demandInterfaceAdd, {
          ...values,
          ...demand
        });
        console.log(res);
        if (res.data.success) {
          form.resetFields();
          this.visible = false;
          this.confirmLoading = false;
        } else {
          this.confirmLoading = false;
        }
      } catch (e) {
        this.confirmLoading = false;
      }
    });
  }

  // 查询需求下接口
  private async searchInterfaceList() {
    try {
      const res = await request.post(Api.demandInterfaceList, {
        demandId: this.demandId
      });
      console.log('接口列表>>', res);
      if (res.data.success) {
        res.data.data.forEach((item: any, index: number) => {
          item.key = index;
        });
        this.tableData = res.data.data;
      } else {
        console.log(res.data.errorMsg);
      }
    } catch (e) {}
  }

  // 初始化查询详情列表
  private async searchDetail(id: number) {
    request.get(Api.searchInterfaceDetail + '?id=' + id).then(res => {
      if (res.data.success) {
        this.detail = res.data.data;
      } else {
        this.$message.error(res.data.errorMsg);
      }
    });
  }

  private async created() {
    console.log('页面初始化了...');
    this.demandId = parseInt(this.$route.params.id, 10);
    try {
      console.log('需求详情参数', this.demandId);
      const res = await request.get(Api.demandDetail + `?id=${this.demandId}`);
      if (res.data.success) {
        console.log(res.data);
        this.demand = res.data.data;
      } else {
        console.log(res.data.errorMsg);
      }
    } catch (e) {}

    // 初始化查询接口列表
    this.searchInterfaceList();

    // 面包屑
    this.$store.commit({
      type: 'changeBreadcrumb',
      breadcrumb: [
        {
          path: '',
          breadcrumbName: '接口详情'
        }
      ]
    });
  }
}
